<template>
	<view class="">
		<!-- 第一部分 轮播图 -->
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="300" circular>
			<swiper-item  v-for="image in bannerIndexData">
				<image v-if="image"  :src="httpImageUrl+image.iurl" mode=""></image>
			</swiper-item>
		</swiper>
		
		<view style="padding:0 10rpx">
			<!-- 第二部分 门店自取或者外卖 -->
			<view class="select">
				<!-- 门店自取 -->
				<view class="oneself" @click="toProduct(0)">
					<image src="/static/mendian.png" mode=""></image>
					<view class="text">门店自取</view>
					<view class="msg">点单无需排队</view>
				</view>
				<!-- 外卖 -->
				<view class="food" @click="toProduct(1)">
					<image src="/static/waimai.png" mode=""></image>
					<view class="text">外卖</view>
					<view class="msg">配送到家</view>
				</view>
			</view>
			
			<!-- 第三部分 积分商城、积分签到、我的优惠券 -->
			<view class="integral">
				<!-- 其中一个模块 -->
				<view class="sc">
					<view class="title">积分商城</view>
					<view class="details">点击了解详情》 </view>
					<image src="/static/sc.png" mode=""></image>
				</view>
				<view class="qd">
					<view class="title">积分签到</view>
					<view class="details">点击了解详情》 </view>
					<image src="/static/qd.png" mode=""></image>
				</view>
				<view class="yhj">
					<view class="title">我的优惠券</view>
					<view class="details">点击了解详情》 </view>
					<image src="/static/yhj.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerIndexData:[]
			}
		},
		onLoad() {
			var that = this;
			//1.获取首页轮播图信息
			uni.getStorage({
				key:"token",// token是用户已登录的凭证，登录成功后才可添加购物车和下单
				success(res){
					console.log("token = ",res.data);
					uni.request({
					    url: that.httpUrl+'image/queryImageByType', //仅为示例，并非真实接口地址。
					    data: {
					        imageType: '2',
							token: res.data,
					    },
					    header: {
					        'custom-header': 'application/json', //自定义请求头信息
					    },
					    success: (reqResult) => {
					        console.log("获取首页轮播图信息：",reqResult);
					        that.bannerIndexData = reqResult.data.data    //设置首页轮播图信息
					    }
					});
				}
			});
			
		},
		methods: {
			toProduct(otype){
				//  将订单类型 0：门店自取 1：外卖的otype值存到Vue实例的globalData身上，便于生成订单时otype的动态赋值
				getApp().globalData.otype = otype;
				uni.switchTab({
					url:"../product/product"
				})
			}
		}
	}
</script>

<style>
	/* 第一部分 */
	.content,uni-page-body{
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}
	.swiper{
		width: 100%;
		height: 550rpx;
	}
	swiper image{
		width: 100%;
		height: 100%;
	}
	
	/* 第二部分 */
	.select{
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 40rpx 80rpx;
		background-color: #fff;
		border-radius: 40rpx;
		margin-top: 10rpx;
	}
	.oneself,.food{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 80rpx;
	} 
	.oneself{
		border-right: 1px solid #999;
	}
	.select image{
		width: 180rpx;
		height: 180rpx;
	}
	.select .text{
		font-weight: bold;
		font-size: 40rpx;
		margin-top: 10rpx;
	}
	.select .msg{
		font-size: 30rpx;
		color: #999;
		margin-top: 10rpx;
	}
	/* 第三部分 */
	.integral{
		margin-top: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}
	.integral image{
		width: 100rpx;
		height: 100rpx;
		margin-top: 40rpx;
	}
	.integral .title {
		font-weight: bold;
		font-size: 36rpx;
	}
	.integral .details{
		font-size: 10rpx;
		color: #999;
		font-family: "微软雅黑";
		margin-top: 10rpx;
	}
	.sc,.qd,.yhj{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%;
		padding: 60rpx 10rpx;
		border-radius: 20rpx;
	}
	.sc{
		background-color: #f5f6fa;
	}
	.qd{
		background-color: #fdf7eb;
	}
	.yhj{
		background-color: #f2f6e5;
	}
</style>
